<template>
    <!-- <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
    open
  </el-button> -->
  <el-avatar shape="square" :size="100" :fit="fit" :src="props.modelValue"  @click="drawer = true">
    <img
        src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
      />
  </el-avatar>

  <el-drawer
    v-model="drawer"
    title="我的图库"
    direction="ttb"
    :before-close="handleClose"
    size="40%"
  >
     <!-- 上传组件？ -->
     <el-upload action="#"
      v-model:file-list="fileList"
      list-type="picture-card" 
      :auto-upload="false"
      :on-change="onChange"
      >
    <el-icon><Plus /></el-icon>

    <template #file="{ file }">
      <div>
        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
        <span class="el-upload-list__item-actions">
          <span
            class="el-upload-list__item-preview"
            @click="handlePictureCardPreview(file)"
          >
            <el-icon><zoom-in /></el-icon>
          </span>
          <span
            v-if="!disabled"
            class="el-upload-list__item-delete"
            @click="getimage(file)"
          >
            <el-icon><Select /></el-icon>
          </span>
        
        </span>
      </div>
    </template>
  </el-upload>
  <!--放大镜-->
   <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image"  width="100%" height="100%"/>
  </el-dialog>
  </el-drawer>
</template>
   

<script setup>
import { onMounted, ref } from 'vue'
import { UploadApi } from '../api'
const fileList = ref([
  {
    name: 'food.jpeg',
    url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
  },
  ])
  const drawer = ref(false)
  const imgurl = ref('https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

//定义图库放大镜效果 
const dialogImageUrl = ref('')
const dialogVisible = ref(false)

  const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}


//文件上传后的触发
const onChange =(uploadFile, uploadFiles)=>{
  // console.log("uploadFile ====",uploadFile);
  // console.log("uploadFiles===" , uploadFiles);
  
  let name = uploadFile.name
  console.log(name);
  let file= uploadFile.raw
  // console.log(file);
  // 读取file文件 异步获取存储在计算机中的文件
  let reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = ()=>{
    console.log(reader.result);
    // 调用上传的接口
    CallUploadApi(name,reader.result)
  }
}


const CallUploadApi =(name,base64)=>{
  UploadApi.upload.call({name:name,base64:base64}).then(res=>{
    // 上传完成列表需要刷新
    getImgList()
  })
}

const getimage = (file) => {
  // imgurl.value = file.url

  emit('update:modelValue',file.url)

  drawer.value = false

}


const props = defineProps({
  modelValue:{
    type:String,
    default:''
  }
})
//子向父传递数据
const emit = defineEmits(['update:modelValue'])

onMounted(()=>{
  getImgList()
})

//api调用图片列表
const getImgList = ()=>{
    UploadApi.imgList.call().then(res =>{
      console.log(res);
      fileList.value = res
      
    })
}



</script>

<style scoped>

</style>